<template>
  <div class="Course">
    <div class="head">
      <div class="search">
        <el-upload
            action=""
            :http-request="uploadFile"
            :limit=1
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            ref="fileupload"
            style="float: left;margin: 12px 2px; height: 100%"
        >
          <el-button type="primary" icon="el-icon-plus"  >导入用户</el-button>
        </el-upload>
        <div class="btnSearch">
          <el-button type="primary" icon="el-icon-search" @click="updateTable">
            搜索
          </el-button>
        </div>
        <el-input v-model="classInput" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="CourseTable" :key="isNum">
      <el-table
          :data="tableData"
          :header-cell-style="{textAlign:'center',background:'#00ffeb'}"
          :cell-style="{textAlign:'center'}"
          :stripe="true"
          style="width: 1250px;margin: auto">
        <el-table-column
            prop="id"
            label="工号"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.id" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.id}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="名字"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.name" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.email" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.email}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型"
            width="120">
        </el-table-column>
        <el-table-column
            prop="tel"
            label="电话"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.tel" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.tel}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.sex" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.sex}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="petName"
            label="昵称"
            width="120">
          <template slot-scope="scope">
            <el-input v-if="isEdit[scope.$index]" class="item" v-model="scope.row.petName" placeholder="请输入内容"></el-input>
            <div v-else class="txt">{{scope.row.petName}}</div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="360">
          <template slot-scope="scope">
            <div v-if="isEdit[scope.$index]">
              <el-button type="primary" @click="cancelEdit(scope.$index)">取消</el-button>
              <el-button type="primary" @click="saveUser(scope.row,scope.$index)">保存</el-button>
            </div>
            <div v-else>
              <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.$index,scope.row.id)">修改</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-divider ></el-divider>
      <div style="height:0;display: flex; margin: auto">
        <el-pagination
            @current-change="(index)=>search(index)"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total"
            :current-page="index"
            style="margin: 0 auto"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data(){
    return{
      tableData:[],
      classInput:'',
      index:1,
      total:1,
      isEdit:[],
      isNum:1,
      userId:'',
    }
  },
  methods:{
    getUserList(key,index){
      this.$axios.post(
          '/getUserList',
          {
            index:index,
            key:key,
          }
      ).then(res=>{
        this.tableData=res.data;
        this.index=index;
        for(let i =0;i<this.tableData.length;){
          this.isEdit.push(false);
          i+=1;
        }
      });
    },
    updateTable(){
      this.getUserList(this.classInput,this.index);
      this.$axios.post(
          '/getUserNum',
          {key:this.classInput}
      ).then(resp=>{this.total=resp.data});
    },
    beforeUpload(file) {
      this.files = file;
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt2M = file.size / 1024 / 1024 < 16
      if (!extension && !extension2) {
        this.$message.warning('上传文件只能是 xls、xlsx格式!')
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传文件大小不能超过 16MB!')
        return
      }
      this.fileName = file.name;
      return false;
    },
    uploadFile (item) {
      const form = new FormData()
      form.append('file', item.file)
      this.$axios.post('/addUserList',form).then(res => {
        console.log(res.data)
        if(res.data===200){
          this.$message({
            type: 'success',
            message:'导入成功',
          });
          this.updateTable();
        }
        else {
          this.$message({
            type: 'error',
            message:'导入失败',
          });
        }
      })
    },
    deleteUser(item){
      this.$confirm('是否删除？', '确认信息', {
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then(() => {
        console.log(item)
        this.$axios.post('/delUser', {
          id:item.id
        }).then(resp=> {
              console.log(resp.data)
              if(resp.data===200) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.updateTable();
              }
              else {
                this.$message({
                  type: 'error',
                  message: '删除失败'
                });
              }
        })
      }).catch(() => {})
    },
    editUser(item,id){
       this.isEdit[item]=true;
       this.userId=id;
       this.isNum++;
    },
    cancelEdit(item){
      this.getUserList(this.classInput,this.index);
      this.isEdit[item]=false;
      this.isNum++;
      this.userId='';
    },
    saveUser(item,index){
      this.$axios.post(
          '/updateUser',
          {
            id:this.userId,
            user:item
          }).then(res=>{
            if(res.data===200)
                this.$message({
                  type:"success",
                  message:'修改成功'
                })
            else
              this.$message({
                type:"error",
                message:'修改失败'
              })
              this.cancelEdit(index)})
    },
    search(index){
      this.isEdit=[];
      this.index=1;
      this.getUserList(this.classInput,index)
    }

  },

  mounted() {
    this.updateTable();
  }
}
</script>

<style scoped>
.Course{
  background-color: white;
  width: 98%;
  margin: auto;
  display: block;
  height: 99%;
}
.CourseTable{
  width: 1200px;
  height: 700px;
  margin: 2px auto auto;
}
.head{
  height: 75px;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  margin-top: 5px;
}
.btnSearch{
  display: flex;
  float: right;
  margin: 12px;
}
.el-input {
  width: 200px;
  border: 1px solid #00aeff;
  border-radius: 12px;
  display: flex;
  margin: 12px;
  float: right;
}
.el-input__inner{
  border-radius: 12px;
}
.item {
  width: 110px;
  border: 0;
  border-radius: 0;
  display: flex;
  margin: 0;
  float:left;
}

.txt{
  line-height: 24px;
  padding: 0 9px;
  box-sizing: border-box;
}
</style>
